<template>
  <el-card class="box-card h100" :style="themeOpacity">
    <div slot="header" :class="['clearfix', isDraggable ? 'draggable-move-clazz' : '']">
      <span>教师个人资产查询</span>
      <el-button style="float: right; padding: 3px 10px" type="text" @click="delCard" v-show="isDraggable">删除</el-button>
    </div>
    <div class="card-vertical">
      <el-row :gutter="5" class="teacher-bar">
        <el-col :span="24" class="h100 " style="width: 100%;">
          <!-- <bar-chart id="barChart" :bardata='bardata'></bar-chart> -->
          <div id="barchart" class="h100"></div>
        </el-col>
      </el-row>
      <el-row class="align-center">
        <a-button type="primary">详情</a-button>
      </el-row>
    </div>
  </el-card>
</template>

<script>
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  // 引入提示框和title组件
  require('echarts/lib/component/legend')
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  import { mixin } from '@/mixin'

  export default {
    name: 'TeacherSalary',
    data() {
      return {
        barChart: null,
        bardata: {
          title: '',
          tooltip: {},
          legend: [],
          axis: [],
          yAxis: {},
          series: []
        }
      }
    },
    props: {
      isDraggable: {
        type: Boolean,
        default: false
      }
    },
    mounted() {
      this.barChart = echarts.init(document.getElementById('barchart'))
      this.$nextTick(() => {
        setTimeout(() => {
          this.drawBar()
        }, 20)
      })
    },
    methods: {
      delCard() {

      },
      drawBar() {
        this.barChart.setOption({
          grid: {
            left: '25',
            bottom: '20',
            top: '15',
            right: '0'
          },
          color: ['#F67A7B', '#31C2E2', '#A2BCE3'],
          title: {
            text: this.bardata.title
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: []
          },
          toolbox: {
            show: true,
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: ['3号', '4号', '5号', '6号', '7号'],
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#666', //左边线的颜色
                  width: '1' //坐标线的宽度
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#666', //左边线的颜色
                  width: '1' //坐标线的宽度
                }
              },
              splitLine: {
                show: true, //去掉网格线
                lineStyle: {
                  color: ['#ccc'],
                  width: 1,
                  type: 'solid'
                }
              }
            }
          ],
          series: [
            {
              name: '薪资',
              type: 'bar',
              itemStyle: {
                //柱图背景色
                color: '#F67A7B'
              },
              data: [25.6, 35, 30, 40, 32.6]
            },
            {
              name: '薪资',
              type: 'bar',
              itemStyle: {
                //柱图背景色
                color: '#31C2E2'
              },
              data: [26.4, 28.7, 17, 15.6, 12.2]
            },
            {
              name: '薪资',
              type: 'bar',
              itemStyle: {
                //柱图背景色
                color: '#A2BCE3'
              },
              data: [26.4, 28.7, 7.7, 15.6, 12.2]
            }
          ]
        })
      }
    },
    components: {
      // BarCharty
    },
    mixins: [mixin]
  }
</script>

<style scoped lang="scss">
  .card-vertical {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    .teacher-bar {
      height: calc(100% - 28px);
    }
  }
  .align-center {
    margin-top: 8px;
    text-align: center;
  }
</style>
